<template>
	<view>
		<scroll-view class='classList' scroll-y style='height:100%;'>
			<block v-for="(item,index) in categorylist" :key='index'>
				<view v-if="!item.pid" class='classList_item' :class='item.id==left_id?"classList_item_act":"classList_line"'
					:id="item.id" @click='left_click'>
					{{item.title}}
				</view>
			</block>
		</scroll-view>

		<scroll-view class='goodList' scroll-y :scroll-into-view="toView" style='height:100%;'>
			<view class='goodListBody'>
				<view class='goodList_title'>
					{{good_show.title}} <text @click="btn_change" class="ys_btn"
						:style="btn_status?'edit_btn':'del_btn'"
						hover-class="btn_hover">{{btn_status?'修改':'删除'}}</text>
				</view>
				<view class='item_name' style="padding:15rpx;">
					<input class="item_input" @blur="blur_add" placeholder-style="color:#ccc;font-size:25rpx;"
						placeholder="新增分类名称" :value="clear_add"></input>
					<view class="item_btn" @click="opt_fix" :data-fid="good_show['id']" data-opt="add"
						hover-class="btn_hover">新增</view>
				</view>
				<block v-for="(item,index) in categorylist" :key="index">
					<view class='goodList_item' v-if="item.pid==left_id">
						<view class='item_name'>
							<input class="item_input" @blur="blur_edit" :id="index"
								:value="item.title"></input>
							<view @click="opt_fix" :data-fid="left_id" :data-id="item.id" :data-index="index"
								:data-val="item.title" :data-opt="btn_status?'del':'edit'" class="item_btn"
								:class="btn_status?'del_btn':'edit_btn'" hover-class="btn_hover">
								{{btn_status?'删除':'修改'}}</view>
						</view>
					</view>
				</block>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				left_id: 0,
				btn_status: false,
				toView:"",
				clear_add:"",
				add:"",
				good_show:{},
				title_list:[],
				categorylist:[{
						id: 1,
						title: '建筑工程'
					},
					{
						id: 2,
						title: '经济金融'
					},
					{
						id: 3,
						title: '会计财税'
					},
					{
						id: 4,
						title: '职业资格'
					},
					{
						id: 5,
						pid: 1,
						title: '建造师'
					},
					{
						id: 6,
						pid: 1,
						title: '造价工程师'
					},
					{
						id: 8,
						pid: 5,
						title: '一级建造师',
						picture: '/static/temp/cate2.jpg'
					},
					{
						id: 9,
						pid: 5,
						title: '二级建造师',
						picture: '/static/temp/cate3.jpg'
					},
					{
						id: 10,
						pid: 6,
						title: '一级造价工程师',
						picture: '/static/temp/cate1.jpg'
					},
					{
						id: 11,
						pid: 6,
						title: '二级造价工程师',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 12,
						pid: 17,
						title: '女性手机',
						picture: '/static/temp/cate5.jpg'
					},
					{
						id: 14,
						pid: 17,
						title: '合约机',
						picture: '/static/temp/cate1.jpg'
					},
					{
						id: 15,
						pid: 17,
						title: '选好卡',
						picture: '/static/temp/cate4.jpg'
					},
					{
						id: 16,
						pid: 17,
						title: '办套餐',
						picture: '/static/temp/cate5.jpg'
					},
					{
						id: 17,
						pid: 2,
						title: '礼品',
					},
					{
						id: 18,
						pid: 2,
						title: '鲜花',
					},
					{
						id: 19,
						pid: 17,
						title: '公益摆件',
						picture: '/static/temp/cate7.jpg'
					},
					{
						id: 20,
						pid: 17,
						title: '创意礼品',
						picture: '/static/temp/cate8.jpg'
					},
					{
						id: 21,
						pid: 18,
						title: '鲜花',
						picture: '/static/temp/cate9.jpg'
					},
					{
						id: 22,
						pid: 18,
						title: '每周一花',
						picture: '/static/temp/cate10.jpg'
					},
					{
						id: 23,
						pid: 18,
						title: '卡通花束',
						picture: '/static/temp/cate11.jpg'
					},
					{
						id: 24,
						pid: 18,
						title: '永生花',
						picture: '/static/temp/cate12.jpg'
					},
					{
						id: 25,
						pid: 3,
						title: '男装'
					},
					{
						id: 26,
						pid: 3,
						title: '女装'
					},
					{
						id: 27,
						pid: 25,
						title: '男士T恤',
						picture: '/static/temp/cate13.jpg'
					},
					{
						id: 28,
						pid: 25,
						title: '男士外套',
						picture: '/static/temp/cate14.jpg'
					},
					{
						id: 29,
						pid: 26,
						title: '裙装',
						picture: '/static/temp/cate15.jpg'
					},
					{
						id: 30,
						pid: 26,
						title: 'T恤',
						picture: '/static/temp/cate16.jpg'
					},
					{
						id: 31,
						pid: 26,
						title: '上装',
						picture: '/static/temp/cate15.jpg'
					},
					{
						id: 32,
						pid: 26,
						title: '下装',
						picture: '/static/temp/cate16.jpg'
					},
					{
						id: 33,
						pid: 4,
						title: '奶粉',
					},
					{
						id: 34,
						pid: 4,
						title: '营养辅食',
					},
					{
						id: 35,
						pid: 4,
						title: '童装',
					},
					{
						id: 39,
						pid: 4,
						title: '喂养用品',
					},
					{
						id: 36,
						pid: 33,
						title: '有机奶粉',
						picture: '/static/temp/cate17.jpg'
					},
					{
						id: 37,
						pid: 34,
						title: '果泥/果汁',
						picture: '/static/temp/cate18.jpg'
					},
					{
						id: 39,
						pid: 34,
						title: '面条/粥',
						picture: '/static/temp/cate20.jpg'
					},
					{
						id: 42,
						pid: 35,
						title: '婴童衣橱',
						picture: '/static/temp/cate19.jpg'
					},
					{
						id: 43,
						pid: 39,
						title: '吸奶器',
						picture: '/static/temp/cate21.jpg'
					},
					{
						id: 44,
						pid: 39,
						title: '儿童餐具',
						picture: '/static/temp/cate22.jpg'
					},
					{
						id: 45,
						pid: 39,
						title: '牙胶安抚',
						picture: '/static/temp/cate23.jpg'
					},
					{
						id: 46,
						pid: 39,
						title: '围兜',
						picture: '/static/temp/cate24.jpg'
					},
				],
				
			}
		},
		onLoad() {
			this.good_show = this.categorylist[0]
			this.left_id = this.categorylist[0].id
		},
		methods: {
			left_click(e) {
				let left_id = e.target.id
				this.left_id= left_id
				this.good_show = this.categorylist[left_id]
			},
			btn_change() {
				this.btn_status= !this.btn_status
			},
			blur_add(e) {
				if (e.detail.cursor > 0) {
					this.add= e.detail.value
				}
			},
			blur_edit(e) {
				if (e.detail.cursor > 0) {
					this.title_list[e.currentTarget.id]  = e.detail.value
				}
			},
			opt_fix(e) {
				let good_show = this.good_show
				let categorylist = this.categorylist
				if (!this.add && e.currentTarget.dataset.opt == 'add') {
					wx.showToast({
						title: '没有新增的内容！',
						icon: 'none'
					})
					return
				}
				if (!this.title_list[e.currentTarget.dataset.index]&& e.currentTarget.dataset.opt ==
					'edit') {
					wx.showToast({
						title: '没有修改内容！',
						icon: 'none'
					})
					return
				}
				let title,confirmText, confirmColor, fix_title, id
				switch (e.currentTarget.dataset.opt) {
					case 'add':
						title = "是否新增"
						confirmText = '确认新增'
						confirmColor = '#4395ff'
						fix_title = this.add
						id = e.currentTarget.dataset.fid
						break
					case 'edit':
						title = "是否修改"
						confirmText = '确认修改'
						confirmColor = '#4395ff'
						fix_title = this.title_list[e.currentTarget.dataset.index]
						id = e.currentTarget.dataset.id
						break
					case 'del':
						title = "是否删除"
						confirmText = '确认删除'
						confirmColor = 'red'
						fix_title = e.currentTarget.dataset.val
						id = e.currentTarget.dataset.id
						break
				}
				let that = this
				wx.showModal({
					title,
					content:fix_title,
					confirmText,
					confirmColor,
					success(res) {
						if (res.confirm) {
							
									switch (e.currentTarget.dataset.opt) {
										case 'add':
											categorylist[that.data.left_id]['info_list'].push(res.data.data)
											console.log(res.data.data)
											console.log(categorylist)
											that.setData({
												categorylist: categorylist,
												good_show: categorylist[that.data.left_id],
												clear_add: '',
												btn_status: false
											})
											break
										case 'edit':
											categorylist[that.data.left_id]['info_list'][e.currentTarget
												.dataset.index
											]['fix_title'] = fix_title
											that.setData({
												categorylist: categorylist,
												good_show: categorylist[that.data.left_id]
											})
											break
										case 'del':
											categorylist[that.data.left_id]['info_list'].splice(e.currentTarget
												.dataset.index, 1)
											that.setData({
												categorylist: categorylist,
												good_show: categorylist[that.data.left_id]
											})
											break
									}

						}
					}
				})


			},
		}
	}
</script>

<style lang="scss">
	.classList {
		width: 25%;
		font-size: 27rpx;
		text-align: center;
		color: #666;
		position: absolute;
		left: 0;
		background: #f2f2f2;
	}

	.class_sum {
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		font-size: 20rpx;
		background: #3593ff;
		color: #fff;
		position: absolute;
		right: 0;
	}

	.classList_item {
		padding: 40rpx 0;
		letter-spacing: 2px;
	}

	.classList_line {
		
	}

	.classList_item_act {
		color: #3593ff;
		font-size: 26rpx;
		background: #fff;
	}

	.goodList {
		width: 75%;
		background: #fff;
		position: absolute;
		right: 0;
	}

	.goodList_title {
		text-align: center;
		letter-spacing: 5px;
		color: #3593ff;
		font-size: 35rpx;
		margin: 10rpx 30rpx;
		padding: 15rpx 0;
		border-bottom: 1rpx #ccc dashed;
		position: relative;
	}

	.goodList_item {
		font-size: 30rpx;
		color: #666;
		margin: 25rpx 10rpx;
	}

	.item_right {
		width: 65%;
	}

	.item_name {
		text-align: center;
		padding: 10rpx 0;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item_input {
		border: 1rpx #3593ff solid;
		border-radius: 8rpx;
		padding: 10rpx;
		width: 70%;
		font-size: 28rpx;
		letter-spacing: 2rpx;
		text-align: left;
	}

	.item_btn {
		width: 23%;
		letter-spacing: 2rpx;
		border-radius: 8rpx;
		color: #fff;
		padding: 10rpx 0;
		background: $themeColor;
	}

	.btn_hover {
		opacity: 0.8;
	}

	.ys_btn {
		color: #fff;
		padding: 10rpx 15rpx;
		border-radius: 8rpx;
		font-size: 25rpx;
		position: absolute;
		left: 15rpx;
		background: #3593ff;
	}

	.del_btn {
		border-color: red;
		background: red;
		text-align: center;
	}

	.edit_btn {
		border-color: #3593ff;
		background: #3593ff;
	}
</style>